<%@page import="com.epcs.util.EpcsDateTimeUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>

<s:set var="user_info" value="%{#session.USER_INFO}" />
<s:if test="%{#user_info == null}"><jsp:forward page="login.jsp"></jsp:forward></s:if>

<html>
    <head>
        <title>EPCS Calendar</title>
		<link href="css/bootstrap.css" rel="stylesheet" media="screen">
		<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
		<link href="css/ace.min.css" rel="stylesheet" media="screen">
		<link href="css/font-awesome.min.css" rel="stylesheet"/>
		<link href="css/jquery.tagsinput.css" rel="stylesheet"/>
		<link href="css/trung-style.css" rel="stylesheet" media="screen">
		<link href='css/cupertino/jquery-ui.min.css' rel='stylesheet' />
		<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
		<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
		<link href="css/daterangepicker-bs3.css" rel="stylesheet" type="text/css" media="all"/>
		
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery-1.9.0.min.js"></script>
		<script src="js/jquery.tagsinput.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/ace.min.js"></script>
		<script src="js/moment.js"></script>
		<script src="js/daterangepicker.js"></script>
		<script src='js/jquery-ui.custom.min.js'></script>
		<script src='fullcalendar/fullcalendar.min.js'></script>
		<script src='fullcalendar/lang/all.js'></script>
		<script src='fullcalendar/lang/vi.js'></script>		
		<script src='js/jquery-ui.min.js'></script>	
		
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>
		
		<style type="text/css">
		.tagsinput{
			min-height: 70px !important;
		}
		.create-event{
			margin-left: 15% !important;
		}
		.ui-corner-all{
			color: #797979	!important;
			background: #cde69c !important;
		}
		.ui-autocomplete{
			width: auto;
		}	
		#invitedPerson_tag {
				width: 130px !important;
			}
		</style>
			
	</head>
	<body onclick="checkDateTimePicker()">
		<s:set var="is_Owner" value="%{#request.IS_OWNER}"></s:set>
		<s:set var="is_Main_Event" value="%{#request.IS_MAIN_EVENT}"></s:set>
		<s:set var="is_Confirmed_Event" value="%{#request.IS_CONFIRM_EVENT}"></s:set>
		<s:set var="event_iter" value="%{#request.EVENT_DETAIL}"></s:set>		
		<s:if test="%{#is_Confirmed_Event == 'true'}">
			<s:if test="%{#is_Main_Event == 'true'}">
				<s:if test="%{#is_Owner == 'true'}">
				<div class="index">
					<!--header -->
					<tag:HeaderTag username="${user_info.fullname}">
					
						<jsp:body>
						<div class="breadcrumbs" id="breadcrumbs" style="margin-bottom: 10px">
							<ul class="breadcrumb" style="margin: 8px;">
								<li>
									<i class="icon-home home-icon"></i>
									<a href="./Index.do">Trang chủ</a>
								</li>
								<li class=""><a href="./AllEvent.do">Quản lý sự kiện</a></li>
								<li class="active">Chỉnh sửa sự kiện</li>
							</ul>
							<!-- .breadcrumb -->
						</div>
						</jsp:body>
					</tag:HeaderTag>		
					
					<!--end header -->
					
					<!-- main body -->
					<tag:SideBarTag active_area="2"></tag:SideBarTag>
					<!-- Calendar board-->
					<div class="main-content">	
					<div class="page-header">
						<h1>Thông tin chi tiết</h1>					
					</div>
					
					<div class="row boxContent">
						<tag:MessageAlertTag></tag:MessageAlertTag>
						<div class="col-md-12" >
							<div class="row" style="margin-bottom: 20px;">
								<div class="col-md-7" ></div>
								<div class="col-md-5" >
									<!-- Kiểm tra trạng thái của event -->
									<s:if test="%{#event_iter.status == 'confirmed'}">
										<form method="POST" id="frm-cancel-event" action="CancelEvent.do">							
																				
											<%
												String datetime = EpcsDateTimeUtil.getCurrentIsoByPattern("yyyy-MM-dd'T'HH:mm:ssZ");
												datetime = EpcsDateTimeUtil.convertToJSPDatetime(datetime);
												request.setAttribute("CURRENT_DATETIME", datetime);
											%>
											<s:set var="currentTime" value="%{#request.CURRENT_DATETIME}" ></s:set>
											<fmt:parseDate value="${event_iter.endTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="end"/>	
											<fmt:parseDate value="${currentTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="current"/>	
											<s:set var="now">${current.time}</s:set>
											<s:set var="finish">${end.time}</s:set>
											<input style="display: none;" type="text" name="id" value ="${event_iter.eventId}" />
											<s:if test="%{#now < #finish}">
												<button type="button"  class="btn btn-danger btn-xs" style="float: left" 
													style="margin: 10px 0 0 170px;"
													onclick="cancelEvent('${event_iter.eventId}', this, 'coming')">
													<i class="icon-lock bigger-160"> Đóng sự kiện</i></button>
											</s:if> 
											<s:else>
												<button type="button"  class="btn btn-danger btn-xs" style="float: left" 
													style="margin: 10px 0 0 170px;"
													onclick="cancelEvent('${event_iter.eventId}', this, 'finished')">
													<i class="icon-bitbucket bigger-160"> Xóa sự kiện</i></button>
											</s:else>
																		
										</form>
										
									</s:if>
								</div>							
							</div>
							<div class="row create-event" >
								
								<s:set var="event_detail" value="%{#request.EVENT_DETAIL}"></s:set>
								<s:iterator var="event_iter" value="%{#event_detail}" >					
								<!-- Lấy dữ liệu  -->
								<!-- Bắt đầu kiểm tra xem event này có phải follow hay k  -->	
									
								<!-- Form submit Update Event -->
									<form method="POST" id="Update_Event" action="UpdateEvent.do">
									<script type="text/javascript">
										var endTime = Date.parse("${event_iter.endTime}") ;
										var currentTime = Date.parse(Date());						
									</script>
									
									<div class="create-body">
										<input style="display: none;" type="text" name="id" value ="${event_iter.eventId}" />
										<input type="text" class="form-control" name="title" id="title" 
											value="<s:property value="%{#event_iter.title}"/>" placeholder="">
										<div id="error-title" style="color:red"></div>
										<s:if test="%{#event_iter.isAllDayEvent == true}">
											<label class="control-label" for="reservationtime">
											Diễn ra cả ngày <input type="checkbox" id="isAllDay" name="isAllDay" checked>
											</label>
										</s:if><s:else>
											<label class="control-label" for="reservationtime">
											Diễn ra cả ngày <input type="checkbox" id="isAllDay" name="isAllDay" >
											</label>
										</s:else>
										
										<div class="controls controls-row">	
											<div id="alldayPicker" style="float: right;width: 70px;">
												<button type="button" id="daterange_allday" style="margin-top: 3px;">
													Chọn <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
												</button>
											</div>
											<div id="notAlldayPicker" style="float: right;width: 70px; display:none;" >
												<button type="button" id="daterange"style="margin-top: 3px;">
													Chọn <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
												</button>
											</div>
											<div class="controls">						   		
												<font color="red">*</font>									
												<input type="hidden" name="daterange_start" id="daterange_start" value="${event_iter.startTime}">	
												<fmt:parseDate value="${event_iter.startTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="start"/>	
												<s:if test="%{#event_iter.isAllDayEvent == true}">
													Từ: <input type="text" id="daterange_start_show" value="<fmt:formatDate value="${start}" pattern="dd/MM/yyyy" />" readonly style="width: 178px">									
												</s:if><s:else>
													Từ: <input type="text" id="daterange_start_show" value="<fmt:formatDate value="${start}" pattern="dd/MM/yyyy (hh:mm aa)" />" readonly style="width: 178px">									
												</s:else>					
												
												<input type="hidden" name="daterange_end" id="daterange_end" value="${event_iter.endTime}">
												<fmt:parseDate value="${event_iter.endTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="end"/>
												<s:if test="%{#event_iter.isAllDayEvent == true}">
													Đến: <input type="text" id="daterange_end_show" value="<fmt:formatDate value="${end}" pattern="dd/MM/yyyy" />" style="width: 178px" readonly>	
												</s:if><s:else>
													Đến: <input type="text" id="daterange_end_show" value="<fmt:formatDate value="${end}" pattern="dd/MM/yyyy (hh:mm aa)" />" style="width: 178px" readonly>		
												</s:else>
											</div>
											<div id="error-time" style="color:red"></div>
										</div>
										<div style="margin-top: 8px;">
										Phân loại:
										<select name="eventCat" id="eventCat" style="width: 100%;">
											<option value="none">Xin chọn thể loại sự kiện !!</option>
											<s:set var="catList" value="%{#request.CATEGORY_LIST}"></s:set>
											<s:iterator var="cat_iter" value="%{#catList}" >	
												<option value="${cat_iter.eventCategoryId}"  
													
													<s:if test="%{#cat_iter.eventCategoryId == #event_iter.eventcategory.eventCategoryId}">selected</s:if> >
													${cat_iter.eventCategoryName}
												</option>		
											</s:iterator>
											
										</select>
										<div id="error-cat" style="color:red"></div>
										</div>
										Địa điểm: <input type="" class="form-control" name="location" id="location" value="${event_iter.location}" placeholder="">
										Mô tả: <textarea class="form-control" id="description" name="description" rows="4">${event_iter.description}</textarea>
										
										<div class="reminder">
											Nhắc nhở trước: (<span id="reminder-max">10-180 phút</span>) <span id="notify-reminder" style="color:orange"></span>
											<div class="input-group">
											  <input type="number" name="reminder" id="reminder" placeholder="Nhập thời gian" value="${event_iter.reminderTime}" 
											  			class="form-control" min="10" max="180">
											  <span class="input-group-addon">Phút</span>
											</div>	
										</div>	
										<div class="person_invite">				
											Mời thêm<input type="text" class="form-control" name="invitedPerson" id="invitedPerson" value="">
										</div>	
										<div style="display:none">
											Organizer: <input type="" class="form-control" name="organizer" id="organizer" value="${event_iter.organizer}" placeholder="">
										</div>
										<s:if test="%{#event_iter.visibility == 'private'}">
											Trạng thái : <input style="margin-left:20px" type="radio" name="visibility" value="public">Công khai<input style="margin-left:20px" name="visibility" type="radio" checked="checked" value="private"> Riêng tư <br/>
										
										</s:if>
										<s:else>
											Trạng thái : <input style="margin-left:20px" type="radio" checked="checked"  name="visibility" value="public">Công khai<input style="margin-left:20px" name="visibility" type="radio" value="private"> Riêng tư <br/>
										</s:else>							
										
									</div>
									<button type="button" onclick="submitCreateEventIndex()" id="update_event" class="btn btn-primary btn-success" style="margin: 20px 20px 20px 400px">Chỉnh sửa</button>
									
									
								</form>	
								
								<script type="text/javascript">
									//Script cho Event ket thuc va Event Follow: khi do se k update duoc
									var endTime = Date.parse(document.getElementById('daterange_end').value);
									var currentTime = Date.parse(Date());
									var organizer = document.getElementById('organizer').value;
									if(endTime <  currentTime || organizer != '' ){
										//document.getElementById('lock_event').style.visibility='hidden';
										document.getElementById('title').readOnly = true;
										$('#isAllDay').prop("disabled", true);
										$('#eventCat').prop("disabled", true);
										$('#location').prop("disabled", true);
										$('#description').prop("disabled", true);
										$('.reminder').remove();
										$('#daterange_allday').remove();
										$('#daterange').remove();
										$('.person_invite').remove();
										document.getElementById('update_event').style.visibility='hidden';
										if(organizer != ''){
											$( ".create-title" ).after( "<p style='margin-top: 20px;color: #E92929;' class=''>Bạn đang theo dõi event này!</p>"); 
										}else{
											$( ".create-title" ).after( "<p style='margin-top: 20px;color: #E92929;' class=''>Event này đã kết thúc!</p>"); 
										}
									}
								</script>
								</s:iterator>
							</div>
					</div>
				</div>
				</div>
					
				<!-- end body -->
				</div>
			</s:if>
			<s:else>
				<jsp:forward page="index.jsp"></jsp:forward>
			</s:else>
		</s:if>
		<s:else>
	 		<jsp:forward page="index.jsp"></jsp:forward>
		</s:else>
	</s:if>
	<s:else>
 		<jsp:forward page="index.jsp"></jsp:forward>
	</s:else>
</body>

<script>
// type= {following, coming, finished}
function cancelEvent(eventId, button, type){
    // ko cho user bấm nữa
    button.setAttribute("disabled", "disabled");
    
    jQuery.ajax({
           url: "CancelEvent.do",
           type: "post",
           data: { id: eventId},
           success: function (data) {
           	if (data.ajaxResult != "Unauthorized"){
           	    	   
           		if (data.ajaxResult != "Fail"){
           		 	window.location.href = "ManageEvent.do";
           		} else {
           			// mở lại button cho user bấm
               		button.removeAttribute("disabled");
           		    var alertStr = 'Chưa thể ';
           		    if (type =='finished') {
           				alertStr = alertStr + 'xóa sự kiện';
           		    } else if (type =='coming'){
           				alertStr = alertStr + 'đóng sự kiện';
           		    } else if (type =='following'){
           				alertStr = alertStr + 'hủy theo dõi sự kiện';
           		    }
           			alert(alertStr);
           		}
           	} else {
           		window.location.href = "Index.do";
           	}
           },
           error: function (data) {
               alert("Hệ thống tạm thời gián đoạn!");
           }
       });
}
</script>


<script type="text/javascript">
function checkDateTimePicker(){
	//alert("Â");
}

	//Script auto complte location
	var componentRestrictions = {country: 'vn'};
	var input = document.getElementById('location');
	var place;
	var autocomplete = new google.maps.places.Autocomplete(input);
	
	autocomplete.setComponentRestrictions(componentRestrictions);	
	
	//Script cho truong hop all day Event, chinh ngay ket thuc xuong 1 ngay
	if($('#isAllDay').is(':checked')){
		var endDateString = document.getElementById('daterange_end_show').value;
		var endDate =  moment(endDateString, "DD-MM-YYYY");
		//endDate.subtract('days', 1);
		var x = endDate.format('DD/MM/YYYY');
		var endShow = document.getElementById('daterange_end_show');
		endShow.value = x;
		
	}else{
		$('#notAlldayPicker').show();
		$('#alldayPicker').hide();	
	}
	
	function submitCreateEventIndex(){
		 var event_title = $('#title').val().replace(/\s/g, '');
		 if(event_title == ""){
			 document.getElementById('error-title').innerHTML="Tiêu đề không hợp lệ!";
			 return false;
		 }	
		 if( $('#isAllDay').is(':checked') == false ){
			var curentTimeMilisecond = moment().add({minutes:10}).valueOf();
			startTimeValue = document.getElementById('daterange_start').value;
			startTimeMilisecond = Date.parse(startTimeValue);
			
			endTimeValue = document.getElementById('daterange_end').value;
			endTimeMilisecond = Date.parse(endTimeValue);
			
			startTimeInDB = '${event_iter.startTime}';
			startTimeInDBMilisecond = moment(startTimeInDB).valueOf();
			if(startTimeMilisecond < curentTimeMilisecond && startTimeMilisecond != startTimeInDBMilisecond ){
				document.getElementById('error-time').innerHTML="Thời gian bắt đầu hoặc kết thúc không hợp lệ, xin chọn lại!";
				//setTimeout('$("#error-time").hide()',5000);
				return false;
			}
			if(startTimeMilisecond < moment().valueOf()){
				document.getElementById('error-time').innerHTML="Sự kiện đã bắt đầu!";
				return false;
			}
			if((startTimeMilisecond+600000) > endTimeMilisecond){
				document.getElementById('error-time').innerHTML="Thời gian bắt đầu hoặc kết thúc không hợp lệ, xin chọn lại!";
				return false;
			}
			
		 };
		 if($('#eventCat').find(":selected").val() == "none"){
				document.getElementById('error-cat').innerHTML="Bạn chưa chọn thể loại sự kiện";
				return false;
		 };
		 
		 document.getElementById("Update_Event").submit();
	}

	
</script>	


<script type="text/javascript">

//Script cho chức năng invite person
$(document).ready(function(){

	document.getElementById("daterange").onclick=function(){
		document.getElementById('error-time').innerHTML =" ";
	};
	$('#daterange_allday').onclick=function(){
		document.getElementById('error-time').innerHTML =" ";
	};
	//---------------tag Input----------------------//
	$('#invitedPerson').tagsInput({
	    'autocomplete_url': getJson,
	    'autocomplete': { selectFirst:true,width:'100px',autoFill:true },
	    'placeholderColor' : '#666666',
	    'width':'auto',
	    'defaultText':'Thêm email',
	    'onAddTag':function(value){
				// he thong tu dong add roi, nen ko can xu ly gi them
			},
	    'onRemoveTag':function(value){
				// he thong tu dong add roi, nen ko can xu ly gi them	
	    	},
	    /*'onChange' : function(htmlObject){},*/
	    'removeWithBackspace' : true,
	    'minChars' : 1,
	    'maxChars' : 0, //if not provided there is no limit
	    
	 });
	 	  
	 function getJson(request, response){
		var keyword = request.term;
		var eventId = ${event_detail.eventId};
		
		$.ajax({  
			type: "get",  	
			contentType: "application/json; charset=utf-8",			
			dataType :"json",  
			url: "GetPeopleJson.do", 
			data:{	    	        	
				term: keyword,
				eventId: eventId
			},
			success: function(json){
			    response(json.json);
			},
			error: function(jqXHR, textStatus, errorThrown){
				//alert('error');
			}
		});
		//var offsets = document.getElementById('invitedPerson_create_addTag').getBoundingClientRect();
		//$(".ui-autocomplete").css({top: 100, left: 200, position:'absolute'});
		if(!$.isFunction($.fn.curCSS)) 
		 $.curCSS = $.css; 
		 $.fn.curCSS = $.fn.css; 
	 }
	 //------------------//
	 
});
</script>
	
<script type="text/javascript">
$(document).ready(function() {
  $('#reservationtime').daterangepicker({
	timePicker: true,
	timePickerIncrement: 1,
	format: 'MM/DD/YYYY h:mm A'
  });
});

function onAddTag(tag) {
			alert("Added a tag: " + tag);
		}
		function onRemoveTag(tag) {
			alert("Removed a tag: " + tag);
		}
		
		function onChangeTag(input,tag) {
			alert("Changed a tag: " + tag);
		}
		
		$(function() {
			$('#person-invited').tagsInput({width:'auto'});

		});
</script>

<script type="text/javascript">
var choosenEndWeekGlobal;
var choosenEndDateGlobal;
$(document).ready(function(){	
    
    //------------- date range picker --------------------------//
	var startInput = document.getElementById('daterange_start');
	var endInput = document.getElementById('daterange_end');
	var startShow = document.getElementById('daterange_start_show');
	var endShow = document.getElementById('daterange_end_show');
	
	function getValidMoment(){
		var theMoment = moment().clone();
		theMoment.seconds(33);
		var minutes = theMoment.minutes();
		var modNumber = minutes%5;
		
		if (modNumber >0 && modNumber <3){			
			theMoment.subtract("minutes", modNumber);			
		} else if (modNumber >= 3 && modNumber <5){
			theMoment.add("minutes", 5-modNumber);
		}
		return theMoment;
	}
	
	var currentTime = getValidMoment();	
	var startTime = moment('${event_iter.startTime}'); 
	if($('#isAllDay').is(':checked')){
		var endTime = moment('${event_iter.endTime}').subtract('days', 1);
	}else{
		var endTime = moment('${event_iter.endTime}');
	}
	var currentDay = moment().clone();
    currentDay.hours(0);
    currentDay.minute(0);
    currentDay.second(0);
    currentDay.millisecond(0);
	/*
	startInput.value = currentTime.format('YYYY-MM-DDT00:00:00Z');
	startShow.value = currentTime.format('DD/MM/YYYY');
	endInput.value = currentTime.format('YYYY-MM-DDT00:00:00Z');
	endShow.value = currentTime.format('DD/MM/YYYY');
	*/
	//startShow.value = startTime.format('DD/MM/YYYY');
	//endShow.value = currentTime.format('DD/MM/YYYY');
	
	$('#daterange').daterangepicker(
	{ 
		timePicker: true,
		opens:"left",
		timePicker12Hour: true,
		showWeekNumbers: true,
		startDate:startTime,
		endDate:endTime,
		minDate: currentDay.clone(),
		/*maxDate: currentTime.clone().add({minutes:60}),*/
		timePickerIncrement: 5,
		format: "DD/MM/YYYY (hh:mm A)",
		separator:" đến ",
	},
		function(start, end) {
		
			//validate start time (start ko the nho hon start standard, 30 phut)
				/*var startInput = document.getElementById('daterange_start');
				var endInput = document.getElementById('daterange_end');*/
				startInput.value = start.format('YYYY-MM-DDTHH:mm:00Z');
				endInput.value = end.format('YYYY-MM-DDTHH:mm:00Z');
				startShow.value = start.format('DD/MM/YYYY (hh:mm A)');
				endShow.value = end.format('DD/MM/YYYY (hh:mm A)');
		}
	);
	
	$('#daterange_allday').daterangepicker(
	{ 
		/*timePicker: false,
		timePicker12Hour: false,*/
		showWeekNumbers: true,
		opens:"left",
		minDate: currentDay.clone(),
		format: "DD/MM/YYYY",
		startDate: startTime,
		separator:" đến hết ",
		endDate: endTime,
		ranges: {
			 'Hôm nay': [currentTime.clone(), currentTime.clone()],
			 'Ngày mai': [currentTime.clone().add({days:1}), currentTime.clone().add({days:1})],
		},
	},
		function(start, end) {
			startInput.value = start.format('YYYY-MM-DDT00:00:00Z');
			endInput.value = end.clone().add("days", 1).format('YYYY-MM-DDT00:00:00Z');
			startShow.value = start.format('DD/MM/YYYY');
			endShow.value = end.clone().format('DD/MM/YYYY');
		}
	);
	
	$('#isAllDay').change(function() {
		startInput.value = "";
		endInput.value = "";
		// 
		var isAlldayEvent = $(this).is(':checked');
		if(isAlldayEvent){
			$('#alldayPicker').show();
			$('#notAlldayPicker').hide();
			setDateTime("allday")
		} else {
			$('#notAlldayPicker').show();
			$('#alldayPicker').hide();
			setDateTime("nonallday");
		}
		
	});
	
	function setDateTime(type){
		if (type == 'allday'){
			startInput.value = startTime.clone().format('YYYY-MM-DDT00:00:00Z');
			startShow.value = startTime.clone().format('DD/MM/YYYY');
			endInput.value = endTime.clone().format('YYYY-MM-DDT00:00:00Z');
			endShow.value = endTime.clone().format('DD/MM/YYYY');
		} else if (type== 'nonallday'){
			// event phai co start it nhat 30 phut sau thoi diem hien tai
			startInput.value = startTime.clone().format('YYYY-MM-DDTHH:mm:00Z');
			startShow.value = startTime.clone().format('DD/MM/YYYY (hh:mm A)');
			// event co do interval toi thieu 30 phut so voi start --> 60 phut so voi hien tai
			endInput.value = endTime.clone().format('YYYY-MM-DDTHH:mm:00Z');
			endShow.value = endTime.clone().format('DD/MM/YYYY (hh:mm A)');
		}
	};
	
	//Kiem tra khi ng dung chon gio bat dau
	$(".calendar.left").change(function(){
		moment().startOf('week').isoWeekday(7);
		//alert ('aa');
		//Lấy tr chứa ngày đang đc chọn
		var rowOfWeek = $(".calendar.left").find('.active').closest('tr');
		//Lấy week của tr đó
		//Week cua ngay dang dc chon
		var choosenWeek = parseInt(rowOfWeek.find('.week').html()) + 1;
		var choosenDate = parseInt(rowOfWeek.find('.active').html());
		var choosenHours = parseInt($('.left .hourselect :selected').text());
		var choosenMins = parseInt($('.left .minuteselect :selected').text());
		var choosenAmPm = $('.left .ampmselect :selected').text();
		if (choosenHours == 12){
			choosenHours = 0;
		}
		if(choosenAmPm == "PM"){
			choosenHours = choosenHours + 12;
		};	    		
		//Week hien tai
		var currentWeek = moment().week();
		if(moment().weekday() == 6 ){
			currentWeek ++;
		};		    		
		var currentDate = moment().date();
		if(currentWeek==choosenWeek && currentDate == choosenDate ){
			//Ngay dang chon
			var choosenFullDay = new Date(moment().year() , moment().month(), moment().date(), choosenHours, choosenMins, 0, 0);
			//millisecond ngay dang chon
			choosenMillisecond = choosenFullDay.getTime();
			//milisecond hien tai
			currentMillisecond = moment().valueOf();
			// nếu thời gian được chọn nhỏ hơn thời gian hiện tại + 10 phút
			if( choosenMillisecond < (currentMillisecond + 600000) ){
				$('.left .calendar-time').after("<p id='noti-choosentime' style='color:red'>Giờ bắt đầu phải lớn hơn giờ hiện tại 10 phút</p>");
				//setTimeout('$("#noti-choosentime").hide()',3000);
			}else if( choosenMillisecond < (currentMillisecond + 1800000)  ){		    			
			//nếu thời gian được chọn lớn hơn thời gian hiện tại + 10 phút nhưng bé hơn thời gian hiện tại + 30 phút
				$('.left .calendar-time').after("<p id='noti-choosentime2' style='color:orange'>Cảnh báo: Thời gian bắt đầu quá gần (nên lớn hơn nửa tiếng so với hiện tại) !!</p>");
				//setTimeout('$("#noti-choosentime2").hide()',5000);
			};
			
		};
		
	});
	
	/////
	//Su kien khi nguoi dung thay doi ngay ket thuc
	
	$(document).on('click','.table-condensed',function() {
		var rowOfEndWeek = $(".calendar.right").find('.active').closest('tr');
		choosenEndWeekGlobal = parseInt(rowOfEndWeek.find('.week').html()) + 1;
		choosenEndDateGlobal = parseInt(rowOfEndWeek.find('.active').html());
	});
	
	//Su kien khi nguoi dung thay doi gio ket thuc
	$(".calendar.right").change(function(){
		//alert ('aa');
		//Lấy tr chứa ngày đang đc chọn
		var rowOfEndWeek = $(".calendar.right").find('.active').closest('tr');
		//Lấy week của tr đó
		//Week cua ngay dang dc chon
		//Neu khong chon ngay ket thuc
		if(choosenEndWeekGlobal == null && choosenEndDateGlobal == null){
			var choosenEndWeek = parseInt(rowOfEndWeek.find('.week').html()) + 1;
			var choosenEndDate = parseInt(rowOfEndWeek.find('.active').html());
		}else{
			choosenEndWeek = choosenEndWeekGlobal;
			choosenEndDate = choosenEndDateGlobal;
		}
		
		var choosenEndHours = parseInt($('.right .hourselect :selected').text());
		var choosenEndMins = parseInt($('.right .minuteselect :selected').text());
		var choosenEndAmPm = $('.right .ampmselect :selected').text();
		if (choosenEndHours == 12){
			choosenEndHours = 0;
		}
		if(choosenEndAmPm == "PM"){
			choosenEndHours = choosenEndHours + 12;
		};		    		
		//Week hien tai
		var rowOfWeek = $(".calendar.left").find('.active').closest('tr');
		//Lấy week của tr đó
		//Week cua ngay dang dc chon
		var choosenWeek = parseInt(rowOfWeek.find('.week').html()) + 1;
		var choosenDate = parseInt(rowOfWeek.find('.active').html());
		var choosenHours = parseInt($('.left .hourselect :selected').text());
		var choosenMins = parseInt($('.left .minuteselect :selected').text());
		var choosenAmPm = $('.left .ampmselect :selected').text();
		if (choosenHours == 12){
			choosenHours = 0;
		}
		if(choosenAmPm == "PM"){
			choosenHours = choosenHours + 12;
		};
		
		if(choosenEndWeek==choosenWeek && choosenEndDate == choosenDate ){
			//Ngay dang chon
			var choosenFullDay = new Date(moment().year() , moment().month(), moment().date(), choosenHours, choosenMins, 0, 0);
			//millisecond ngay dang chon
			choosenMillisecond = choosenFullDay.getTime();
			var choosenEndFullDay = new Date(moment().year() , moment().month(), moment().date(), choosenEndHours, choosenEndMins, 0, 0);
			//millisecond ngay dang chon
			choosenEndMillisecond = choosenEndFullDay.getTime();
			
			// nếu thời gian được chọn nhỏ hơn thời gian hiện tại + 10 phút
			if( choosenMillisecond  > choosenEndMillisecond ){
				$('.right .calendar-time').after("<p id='noti-endChoosentime' style='color:red'>Giờ kết thúc phải lớn hơn giờ bắt đầu</p>");
				//setTimeout('$("#noti-endChoosentime").hide()',5000);
			}else if( (choosenMillisecond +600000) > choosenEndMillisecond ){
				$('.right .calendar-time').after("<p id='noti-endChoosentime' style='color:red'>Sự kiện phải từ 10 phút trở lên</p>");
				//setTimeout('$("#noti-endChoosentime").hide()',5000);
			}else{
				$('.applyBtn ').removeAttr("disabled");
			};
			
		};
		
	});
	
	
	//Su kien khi nhan apply
	$(".applyBtn").click(function(){
		var isAlldayEvent = $('#isAllDay').is(':checked');
		if(isAlldayEvent == false){
			//alert ('aa');
			//Lấy tr chứa ngày đang đc chọn
			var rowOfWeek = $(".calendar.left").find('.active').closest('tr');
			//Lấy week của tr đó
			//Week cua ngay dang dc chon
			var choosenWeek = parseInt(rowOfWeek.find('.week').html()) + 1;
			var choosenDate = parseInt(rowOfWeek.find('.active').html());
			var choosenHours = parseInt($('.left .hourselect :selected').text());
			var choosenMins = parseInt($('.left .minuteselect :selected').text());
			var choosenAmPm = $('.left .ampmselect :selected').text();
			if (choosenHours == 12){
    			choosenHours = 0;
    		}
    		if(choosenAmPm == "PM"){
    			choosenHours = choosenHours + 12;
    		};		    		
			//Week hien tai
			var currentWeek = moment().week();
			if(moment().weekday() == 6 ){
				currentWeek ++;
			};
			var currentDate = moment().date();
			//Ngay dang chon
			//var choosenFullDay = new Date(moment().year() , moment().month(), moment().date(), choosenHours, choosenMins, 0, 0);
			//millisecond ngay dang chon
			//choosenMillisecond = choosenFullDay.getTime();
			//milisecond hien tai
			currentMillisecond = moment().valueOf();
			//Neu chung tuan trong nam va ngay
			if(currentWeek==choosenWeek && currentDate == choosenDate ){	
				var choosenFullDay = new Date(moment().year() , moment().month(), moment().date(), choosenHours, choosenMins, 0, 0);
				//millisecond ngay dang chon
				choosenMillisecond = choosenFullDay.getTime();
				// nếu thời gian được chọn nhỏ hơn thời gian hiện tại + 10 phút
				if( choosenMillisecond < (currentMillisecond + 600000) ){
					$('#noti-choosentime').remove();	
    				$('#noti-choosentime3').remove();
					$('.left .calendar-time').after("<p id='noti-choosentime3' style='color:red'>Giờ bắt đầu phải lớn hơn giờ hiện tại 10 phút</p>");
					//setTimeout('$("#noti-choosentime3").hide()',5000);
					return false;
				};		    			
			};
			//Lấy tr của ngày kết thúc
			var rowOfEndWeek = $(".calendar.right").find('.active').closest('tr');
			var choosenEndWeek = parseInt(rowOfEndWeek.find('.week').html()) + 1;
			var choosenEndDate = parseInt(rowOfEndWeek.find('.active').html());
			var choosenEndHours = parseInt($('.right .hourselect :selected').text());
			var choosenEndMins = parseInt($('.right .minuteselect :selected').text());
			var choosenEndAmPm = $('.right .ampmselect :selected').text();
			if (choosenEndHours == 12){
    			choosenEndHours = 0;
    		}
    		if(choosenEndAmPm == "PM"){
    			choosenEndHours = choosenEndHours + 12;
    		};
			if(choosenWeek == choosenEndWeek && choosenDate == choosenEndDate){
				var choosenFullDay = new Date(moment().year() , moment().month(), moment().date(), choosenHours, choosenMins, 0, 0);
				//millisecond ngay dang chon
				choosenMillisecond = choosenFullDay.getTime();
				
				var choosenEndFullDay = new Date(moment().year() , moment().month(), moment().date(), choosenEndHours, choosenEndMins, 0, 0);
				//millisecond ngay dang chon
				choosenEndMillisecond = choosenEndFullDay.getTime();
				if( (choosenMillisecond + 600000) > choosenEndMillisecond){
					$('#noti-endChoosentime').remove();	
					$('.right .calendar-time').after("<p id='noti-endChoosentime' style='color:red'>Sự kiện phải từ 10 phút trở lên</p>");
					//setTimeout('$("#noti-endChoosentime").hide()',5000);
					return false;
				};
			}
			
			if( $('#isAllDay').is(':checked') == false && currentWeek==choosenWeek && currentDate == choosenDate ){
				
				var choosenFullDay = new Date(moment().year() , moment().month(), moment().date(), choosenHours, choosenMins, 0, 0);
				//millisecond ngay dang chon
				choosenMillisecond = choosenFullDay.getTime();
				
				//khoảng thời gian từ hiện tại cho tới lúc bắt đầu sự kiện
				var differenceMillisecond = choosenMillisecond - currentMillisecond;
				var differenceMin = differenceMillisecond/(60000);
				var y = differenceMin % 1;
				var maxTimeReminder = differenceMin - y ;
				if(maxTimeReminder > 180){
					maxTimeReminder = 180;
				}
				$('#reminder').attr({"max" : maxTimeReminder,});
				document.getElementById('reminder-max').innerHTML=("10-"+maxTimeReminder+"phút");
				
				//Kiểm tra xem thời cgian bắt đầu có trong khoảng từ + 10 > + 30 không
				if( choosenMillisecond < (currentMillisecond + 1800000)  ){		    			
				//nếu thời gian được chọn lớn hơn thời gian hiện tại + 10 phút nhưng bé hơn thời gian hiện tại + 30 phút
					document.getElementById('notify-reminder').innerHTML="(Cảnh báo: Thời gian bắt đầu quá gần)";
					$('#reminder').attr({"max" : maxTimeReminder,});
					$('#reminder').val(10);
					document.getElementById('reminder-max').innerHTML=("10-"+maxTimeReminder+"phút");
					//document.getElementById('reminder-now').style.display = 'block';
					$('.input-group').show();
					$("#reminder_now").prop("checked", false); 
				}else{
					$('#reminder').val(10);
					document.getElementById('notify-reminder').innerHTML="";
					//document.getElementById('reminder-now').style.display = 'none';
					$('.input-group').show();
					$("#reminder_now").prop("checked", false); 
				};
			};
		}
	});
	
	
	
	
});
</script>


</html>
